import React from 'react';
import {
  Container,
  List,
  NavBar,
  Slider,
  Group,
  View,
  Card,
  Grid,
  Col
} from 'amazeui-touch';
import {
  Link,
} from 'react-router';

import axios from 'axios';

export default class Index extends React.Component {
  static defaultProps = {
    transition: 'rfr'
  };
  constructor(props) {
    super(props);
    this.state = {flowerData: [],sliderData:[]}
    this.getFlowers();
    this.getSlider();
  }

  getSlider(){
    axios.get("/api/slider/list")
      .then(res => {
        this.setState({ sliderData: res.data.data});
      });
  }

  getFlowers(){
      axios.get("/api/flower/list")
        .then(res => {
            this.setState({ flowerData: res.data.data.data});
       });
  }
  render() {
    return (
      <View>
        <Container scrollable>
          <img src="/i/test.jpg" style={{width:'100%'}}/>
          <Slider controls={false} style={{padding:'0.2rem',backgroundColor:'#ebebebeb'}}>
          {this.state.sliderData.map((sliderItem, index) => {
            return (
              <Slider.Item key={index}>
                <img src={sliderItem.imgUrl} />
              </Slider.Item>
            );
          })}
          </Slider>
          <Grid avg={2}>
            {this.state.flowerData.map(function(el, index){
              return(
                <Col key={index} style={{padding:'0.01rem',backgroundColor:'#ebebebeb'}}>
                  <div style={{position:'relative'}}>
                    <Link to={{pathname:"Detail/"+el.id}}>
                      <img src={el.imgUrl}/>
                    </Link>
                   </div>
                </Col>)
            })}

          </Grid>



        </Container>
      </View>
    );
  }
}
